<template>
  <div class="design-insert">
    <ul class="el-tab-area">
      <li
        v-for="item in tabList"
        :key="item.value"
        @click="handleTabClick(item.value)"
      >
        <div class="item-one" :class="{ active: activeName === item.value }">
          <i :class="item.icon" class="iconfont"></i>
          <p>{{ item.label }}</p>
        </div>
      </li>
    </ul>
    <div class="compo-area">
      <template
        v-for="(item, index) in tabConfigList.find(
          (item) => item.type === activeName
        )?.children"
        :key="index"
      >
        <div
          class="charts"
          @dragstart="handleDragOneToCanvas($event, item)"
          @dragover.prevent
          draggable="true"
          v-if="activeName === 'charts'"
        >
          <div class="component-img">
            <img :src="getAssetsFile(item.icon + '.webp')" class="image" lazy />
          </div>
          <p>{{ item.label }}</p>
        </div>
        <div
          class="plug-in-units"
          @dragstart="handleDragOneToCanvas($event, item)"
          @dragover.prevent
          draggable="true"
          v-else-if="activeName === 'plug-in-units'"
        >
          <i :class="item.icon" class="iconfont"></i>
          <p>{{ item.label }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

import tabConfigList from '../ui-configs/index.js';
console.log(tabConfigList)
const activeName = ref('charts');
const emit = defineEmits(['on-dragstart']);
const tabList = reactive([
  {
    icon: 'icon-icon-chart',
    label: '图表',
    value: 'charts'
  },
  {
    icon: 'icon-icon-map',
    label: '地图',
    value: 'tab-2'
  },
  {
    icon: 'icon-icon-plug-in',
    label: '插件',
    value: 'plug-in-units'
  },
  {
    icon: 'icon-a-icon-3dmodel',
    label: '3D模型',
    value: 'tab-4'
  },
  {
    icon: 'icon-a-icon-gisterrain',
    label: 'GIS地形',
    value: 'tab-5'
  }
]);

function getAssetsFile(url) {
  return new URL(`../ui-images/${url}`, import.meta.url).href;
}
const handleDragOneToCanvas = (event, item) => {
  emit('on-dragstart', event, item);
};

const handleTabClick = (value) => {
  activeName.value = value;
};
</script>
<style scoped lang="scss">
*{
    box-sizing: border-box;
}
.design-insert {
  padding: 0  0 0 0.24rem;

  .el-tab-area {
    display: flex;
    justify-content: flex-start;

    li {
      // flex: 1;
      display: flex;
      justify-content: center;
    }

    .item-one {
      display: flex;
      padding: 0 0.17rem;
      text-align: center;
      height: 0.32rem;
      line-height: 0.32rem;
      border-radius: 0.08rem;

      .iconfont {
        margin-right: 0.06rem;
      }
    }

    .active {
      color: #165dff;
      background: #f2f3f5;
    }
  }

  .compo-area {
    display: flex;
    margin-top: 0.16rem;
    flex-wrap: wrap;
    overflow-y: auto;

    .charts {
      width: 1.36rem;
      margin-right: 0.16rem;
      margin-bottom: 0.24rem;

      .component-img {
        width: 1.36rem;
        height: 1.18rem;
        background: #ffffff;
        // border: 1px solid;
        box-shadow: 0px 0.04rem 0.1rem rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        border-radius: 0.08rem;

        img {
          width: 90%;
          height: 90%;
        }
      }

      p {
        text-align: center;
        margin-top: 0.08rem;
      }
    }

    .plug-in-units {
      width: 0.6rem;
      height: 0.6rem;
      background: #f2f3f5;
      border-radius: 0.06rem;
      margin-right: 0.16rem;
      margin-bottom: 0.16rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      p {
        font-size: 0.12rem;
        margin-top: 0.08rem;
      }
    }
  }
}
</style>
